<template>
  <div class="page">
    <img src="@/assets/del.png" class="close-icon" @click.stop="close" />
    <div class="qr-scanner">
      <div class="box" id="box">
        <div class="line"></div>
        <div class="angle"></div>
      </div>
      <video v-if="isVideo" class="video"></video>
      <canvas id="canvas" class="canvas"></canvas>
    </div>
  </div>
</template>

<script>
import jsQR from "jsqr";
export default {
  data() {
    return {
      isVideo: true,
      code: "", 
    };
  },
  mounted() {
    let src = this.GetQueryString("baseSrc");
    console.log(src);
    if (src) this.src = src;
    this.onload();
  },
  methods: {
    GetQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    onload() {
      let video = document.querySelector("video");
      let _this = this;
      navigator.mediaDevices
        .getUserMedia({ video: { facingMode: "environment" } })
        .then(function (stream) {
          video.srcObject = stream;
          video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
          video.play();
          requestAnimationFrame(_this.tick);
        });
    },
    tick() {
      let video = document.querySelector("video");
      let canvasElement = document.getElementById("canvas");
      let canvas = canvasElement.getContext("2d");
      let box = document.getElementById("box");
      if (video.readyState === video.HAVE_ENOUGH_DATA) {
        canvasElement.hidden = false;
        canvasElement.height = window.screen.availHeight;
        canvasElement.width = video.videoWidth;
        canvas.drawImage(
          video,
          0,
          0,
          video.videoWidth,
          window.screen.availHeight
        );
        let imageData = canvas.getImageData(
          box.getBoundingClientRect().left,
          box.getBoundingClientRect().top,
          box.offsetWidth,
          box.offsetHeight
        );
        let code = jsQR(imageData.data, imageData.width, imageData.height, {
          inversionAttempts: "dontInvert",
        });
        if (code) {
          this.code = code.data;
          video.pause();
          this.callBack(code.data);
          return;
          // this.drawLine(
          //   code.location.topLeftCorner,
          //   code.location.topRightCorner,
          //   "#02D32C"
          // );
          // this.drawLine(
          //   code.location.topRightCorner,
          //   code.location.bottomRightCorner,
          //   "#02D32C"
          // );
          // this.drawLine(
          //   code.location.bottomRightCorner,
          //   code.location.bottomLeftCorner,
          //   "#02D32C"
          // );
          // this.drawLine(
          //   code.location.bottomLeftCorner,
          //   code.location.topLeftCorner,
          //   "#02D32C"
          // );
        }
      }
      requestAnimationFrame(this.tick);
    },
    callBack(code) {
      if (this.src) {
        let baseSrc = decodeURIComponent(this.src)
        window.location.href = `${baseSrc}?code=${this.code}`;

        console.log(`${baseSrc}?code=${this.code}`);
      } else {
        document.write(code.data);
      }
    },
    drawLine(begin, end, color) {
      let canvasElement = document.getElementById("canvas");
      let canvas = canvasElement.getContext("2d");
      canvas.beginPath();
      canvas.moveTo(begin.x, begin.y);
      canvas.lineTo(end.x, end.y);
      canvas.lineWidth = 4;
      canvas.strokeStyle = color;
      canvas.stroke();
    },
    close() {
      this.isVideo = false;
      window.history.back();
    },  
  },
};
</script>

<style >
.page {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.close-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: left;
}

.qrbox {
  background: rgba(0, 0, 0, 0.274);
  width: 100%;
  height: 100%;
  position: relative;
}

.canvas {
  position: absolute;
  top: 0;
  left: 0;
}

.video {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
}

.qr-scanner {
  background-image: linear-gradient(
      0deg,
      transparent 24%,
      rgba(32, 255, 77, 0.1) 25%,
      rgba(32, 255, 77, 0.1) 26%,
      transparent 27%,
      transparent 74%,
      rgba(32, 255, 77, 0.1) 75%,
      rgba(32, 255, 77, 0.1) 76%,
      transparent 77%,
      transparent
    ),
    linear-gradient(
      90deg,
      transparent 24%,
      rgba(32, 255, 77, 0.1) 25%,
      rgba(32, 255, 77, 0.1) 26%,
      transparent 27%,
      transparent 74%,
      rgba(32, 255, 77, 0.1) 75%,
      rgba(32, 255, 77, 0.1) 76%,
      transparent 77%,
      transparent
    );
  background-size: 3rem 3rem;
  background-position: -1rem -1rem;
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #111;
}

.qr-scanner .box {
  width: 75vw;
  height: 75vw;
  max-height: 75vh;
  max-width: 75vh;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  /* border: 0.1rem solid rgba(0, 255, 51, 0.2); */
  z-index: 99;
}

.qr-scanner .line {
  height: calc(100% - 2px);
  width: 100%;
  background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
  border-bottom: 3px solid #00ff33;
  transform: translateY(-100%);
  animation: radar-beam 2s infinite;
  animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
  animation-delay: 1.4s;
}

.qr-scanner .box:after,
.qr-scanner .box:before,
.qr-scanner .angle:after,
.qr-scanner .angle:before {
  content: "";
  display: block;
  position: absolute;
  width: 3vw;
  height: 3vw;

  border: 0.2rem solid transparent;
}

.qr-scanner .box:after,
.qr-scanner .box:before {
  top: 0;
  border-top-color: #00ff33;
}

.qr-scanner .angle:after,
.qr-scanner .angle:before {
  bottom: 0;
  border-bottom-color: #00ff33;
}

.qr-scanner .box:before,
.qr-scanner .angle:before {
  left: 0;
  border-left-color: #00ff33;
}

.qr-scanner .box:after,
.qr-scanner .angle:after {
  right: 0;
  border-right-color: #00ff33;
}

@keyframes radar-beam {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}

.close-icon {
  height: 30px;
  width: 30px;
  position: fixed;
  right: 10px;
  top: 10px;
  z-index: 999;
}
</style>